<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu"
             :default-active="onRoutes"
             :collapse="collapse"
             background-color="#324157"
             text-color="#bfcbd9"
             active-text-color="#20a0ff"
             unique-opened
             @select="handleSelect">
      <template v-for="item in items">
        <template v-if="Array.isArray(item.children) && item.children.length>0">
          <el-submenu :index="item.id+''"
                      :key="item.id">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span slot="title">{{ item.auth_name }}</span>
            </template>
            <template v-for="subItem in item.children">
              <!-- <el-submenu v-if="Array.isArray(subItem.children) && subItem.children.length>0"
                          :index="subItem.id+''"
                          :key="subItem.id">
                <template slot="title">{{ subItem.auth_name }}</template>
                <el-menu-item v-for="(threeItem,i) in subItem.children"
                              :key="i"
                              :index="threeItem.path">{{ threeItem.auth_name }}</el-menu-item>
              </el-submenu> -->
              <!-- v-else -->
              <el-menu-item 
                            :index="subItem.path"
                            :key="subItem.id+''">{{ subItem.auth_name }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.path"
                        :key="item.id">
            <i class="el-icon-s-grid"></i>
            <span slot="title">{{ item.auth_name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from '../common/bus';
import api from '@/api/index';
export default {
  data () {
    return {
      collapse: false,
      tabIndex: 0,
      items: [],
      onRoutes: 'resourceList', 
    };
  },
  created () {
     this.onRoutes=this.$route.path == '/'?'resourceList':this.$route.path.substring(1);
     bus.$on('collapse', msg => {
        this.collapse = msg;
        bus.$emit('collapse-content', msg);
      });
      this.getAuthTree();
   },
  methods:{
    //获得权限树
    getAuthTree(){
      this.$http.post(api.GET_AUTH_TREE,{})
          .then((res)=>{
            if(res.code == 1){
              let list=Array.isArray(res.data)?res.data:[];
              this.items=list;
              localStorage.setItem('authTreeList',JSON.stringify(list));
            }
          })
    },
    handleSelect(key, keyPath){
      let routers =this.$route.path.substring(1);
      if(this.onRoutes!=key || routers!=key){
        window.sessionStorage.setItem('jqjtIsBack',1);
        this.onRoutes=key;
        this.$router.push({path:'/'+key})
      }
    }
  }
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.sidebar > ul {
    height: 100%;
}
</style>
